<template>
  <div style="margin-top: 1.5%">
    <div class="sidebar">
      <!-- 跳转到指定模块 -->
      <el-card class="btn-box">
        <el-button
          style="margin-left: 10px"
          @click="ding"
        >医疗器械情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 1,20)"
        >不良事件情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 2,20)"
        >使用情况
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 3,20)"
        >事件初步原因分析和处置
        </el-button>
        <el-button
          @click="goAssignBlock('block'+ 4,20)"
        >事件结果
        </el-button>
      </el-card>
    </div>

    <div class="content">
      <el-collapse style=" margin-left: 8%;" v-model="activeNames">
        <!--医疗器械情况-->
        <div ref="block0"></div>
        <el-collapse-item name="1">
          <template #title>
            <div class="shaoqicaibname">医疗器械情况</div>
          </template>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="basicqingkuangform" :model="basicForm" :rules="qingkuangrules" label-width="140px">
              <el-form-item label="类别" prop="apparatusClassification">
                <el-radio-group v-model="basicForm.apparatusClassification">
                  <el-radio label="01">设备类</el-radio>
                  <el-radio label="02">耗材类</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="产品名称" style="width: 600px;margin-top: 15px" prop="apparatusProductName">
                <el-input v-model="basicForm.apparatusProductName"></el-input>
              </el-form-item>
              <el-form-item label="注册证编号" style="width: 600px;margin-top: 15px" prop="apparatusRegistrationNumber">
                <el-input v-model="basicForm.apparatusRegistrationNumber"></el-input>
              </el-form-item>
              <el-form-item label="型号" style="width: 600px;margin-top: 15px" prop="apparatusModel">
                <el-input v-model="basicForm.apparatusModel"></el-input>
              </el-form-item>
              <el-form-item label="规格" style="width: 600px;margin-top: 15px" prop="apparatusSpecifications">
                <el-input v-model="basicForm.apparatusSpecifications"></el-input>
              </el-form-item>
              <el-form-item label="产品批号" style="width: 600px;margin-top: 15px" prop="apparatusProductBatch">
                <el-input v-model="basicForm.apparatusProductBatch"></el-input>
              </el-form-item>
              <el-form-item label="产品编号" style="width: 600px;margin-top: 15px" prop="apparatusProductNumber">
                <el-input v-model="basicForm.apparatusProductNumber"></el-input>
              </el-form-item>
              <el-form-item label="UDI" style="width: 600px;margin-top: 15px" prop="apparatusUdi">
                <el-input v-model="basicForm.apparatusUdi"></el-input>
              </el-form-item>
              <el-form-item label="生产日期" style="margin-top: 15px" prop="apparatusDateProduction">
                <el-date-picker
                  v-model="basicForm.apparatusDateProduction"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="有效日期" style="margin-top: 15px" prop="apparatusValidUntil">
                <el-date-picker
                  v-model="basicForm.apparatusValidUntil"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="上市许可持有人名称" style="width: 600px;margin-top: 15px" prop="apparatusLicenseHolder">
                <el-input v-model="basicForm.apparatusLicenseHolder"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <!--不良事件情况-->
        <div ref="block1"></div>
        <el-collapse-item name="2">
          <template #title>
            <div class="shaoqicaibname">不良事件情况</div>
          </template>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="basicbuliangform" :model="basicForm" :rules="buliangrules" label-width="140px">
              <el-form-item label="事件发生日期" prop="apparatusDateIncident">
                <el-date-picker
                  v-model="basicForm.apparatusDateIncident"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="发现或获知日期" prop="apparatusDiscoveryAcquisition" style="margin-top: 15px">
                <el-date-picker
                  v-model="basicForm.apparatusDiscoveryAcquisition"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="伤害表现" style="width: 600px;margin-top: 15px" prop="apparatusInjuryPerformance">
                <el-input type="textarea" v-model="basicForm.apparatusInjuryPerformance" :rows="2"
                          resize="none"></el-input>
              </el-form-item>
              <el-form-item label="附件图片" prop="apparatusInjuryPicture" style="margin-top: 15px">
                <image-upload :limit="1" v-model="basicForm.apparatusInjuryPicture"/>
              </el-form-item>
              <el-form-item label="器械故障表现" style="width: 600px;margin-top: 15px" prop="apparatusEquipmentFailure">
                <el-input type="textarea" v-model="basicForm.apparatusEquipmentFailure" :rows="2"
                          resize="none"></el-input>
              </el-form-item>
              <el-form-item label="附件图片" prop="apparatusFailurePicture" style="margin-top: 15px">
                <image-upload :limit="1" v-model="basicForm.apparatusFailurePicture"/>
              </el-form-item>
              <el-form-item label="是否涉及患者" prop="apparatusInvolvePatients" style="margin-top: 15px">
                <el-radio-group v-model="basicForm.apparatusInvolvePatients">
                  <el-radio label="01">是</el-radio>
                  <el-radio label="02">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <!--使用情况-->
        <div ref="block2"></div>
        <el-collapse-item name="3">
          <template #title>
            <div class="shaoqicaibname">使用情况</div>
          </template>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="basicshiyongform" :model="basicForm" :rules="shiyongrules" label-width="140px">
              <el-form-item label="预期治疗疾病或作用" style="width: 600px;" prop="apparatusTreatmentEffect">
                <el-input type="textarea" v-model="basicForm.apparatusTreatmentEffect" :rows="2"
                          resize="none"></el-input>
              </el-form-item>
              <el-form-item label="器械使用日期" prop="apparatusDateUseEquipment" style="margin-top: 15px">
                <el-date-picker
                  v-model="basicForm.apparatusDateUseEquipment"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="使用场所" prop="apparatusPlaceUse" style="margin-top: 15px">
                <el-radio-group v-model="basicForm.apparatusPlaceUse">
                  <el-radio label="01">医疗机构</el-radio>
                  <el-radio label="02">家庭</el-radio>
                  <el-radio label="03">其他</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="场所名称" style="width: 600px;margin-top: 15px" prop="apparatusNamePlace">
                <el-input v-model="basicForm.apparatusNamePlace"></el-input>
              </el-form-item>
              <el-form-item label="使用过程" style="width: 600px;margin-top: 15px" prop="apparatusUsageProcess">
                <el-input type="textarea" v-model="basicForm.apparatusUsageProcess" :rows="2" resize="none"></el-input>
              </el-form-item>
              <el-form-item label="合并用药械情况说明" style="width: 600px;margin-top: 15px" prop="apparatusCombinedEquipment">
                <el-input type="textarea" v-model="basicForm.apparatusCombinedEquipment" :rows="2"
                          resize="none"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <!--事件初步原因分析与处置-->
        <div ref="block3"></div>
        <el-collapse-item name="4">
          <template #title>
            <div class="shaoqicaibname">事件初步原因分析与处置</div>
          </template>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="basicfenxiform" :model="basicForm" :rules="fenxirules" label-width="140px">
              <el-form-item label="事件原因分析">
                <el-checkbox-group v-model="shijian" @change="shijian1(shijian)">
                  <el-checkbox label="01">产品原因(包括说明书等)</el-checkbox>
                  <el-checkbox label="02">操作原因</el-checkbox>
                  <el-checkbox label="03">患者自身原因</el-checkbox>
                  <el-checkbox label="04">无法确定</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="事件原因分析描述" style="width: 600px;margin-top: 15px" prop="apparatusAnalysisDescription">
                <el-input type="textarea" v-model="basicForm.apparatusAnalysisDescription" :rows="3"
                          resize="none"></el-input>
              </el-form-item>
              <el-form-item label="附件图片" prop="apparatusAnalysisPicture" style="margin-top: 15px">
                <image-upload :limit="1" v-model="basicForm.apparatusAnalysisPicture"/>
              </el-form-item>
              <el-form-item label="初步处置情况" style="width: 600px;margin-top: 15px" prop="apparatusDisposalSituation">
                <el-input type="textarea" v-model="basicForm.apparatusDisposalSituation" :rows="3"
                          resize="none"></el-input>
              </el-form-item>
              <el-form-item label="附件图片" prop="apparatusDisposalPicture" style="margin-top: 15px">
                <image-upload :limit="1" v-model="basicForm.apparatusDisposalPicture"/>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <!--事件结果-->
        <div ref="block4"></div>
        <el-collapse-item name="5">
          <template #title>
            <div class="shaoqicaibname">事件结果</div>
          </template>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportjieguoform" :model="reportForm" :rules="jieguorules" label-width="140px">
              <el-form-item label="纠纷或纠纷隐患可能性" prop="resultsPossibilityDispute">
                <el-radio-group v-model="reportForm.resultsPossibilityDispute">
                  <el-radio label="01">确定有</el-radio>
                  <el-radio label="02">可能有</el-radio>
                  <el-radio label="03">无</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="事件严重程度" prop="resultsEventSeverity">
                <el-select v-model="reportForm.resultsEventSeverity" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in dict.type.he_event_severity"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="事件分级" style="width: 600px" prop="resultsEventClassification">
                <el-radio-group v-model="reportForm.resultsEventClassification">
                  <el-radio label="01" style="margin-top: 10px; margin-bottom: 10px">Ⅰ级事件: 发生错误，造成患者死亡 (包括损害程度I级)
                  </el-radio>
                  <el-radio label="02" style="margin-bottom: 10px">Ⅱ级事件: 发生错误，且造成患者伤害 (包括损害程度E、F、G、H级)</el-radio>
                  <el-radio label="03" style="margin-bottom: 10px">Ⅲ级事件: 发生错误，但未造成患者伤害 (包括损害程度B、C、D级)</el-radio>
                  <el-radio label="04">Ⅳ级事件: 错误未发生 (错误隐患)(包括损害程度A级)</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="伤害严重度" prop="resultsSeverityInjury">
                <el-radio-group v-model="reportForm.resultsSeverityInjury">
                  <el-radio label="01">死亡</el-radio>
                  <el-radio label="02">极度严重</el-radio>
                  <el-radio label="03">重度</el-radio>
                  <el-radio label="04">中度</el-radio>
                  <el-radio label="05">轻度</el-radio>
                  <el-radio label="06">未造成伤害</el-radio>
                  <el-radio label="07">无伤害</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!--保存按钮-->
    <div style="position: fixed; margin-top: -0.5%; right: 3%; width: 300px">
      <el-button
        type="primary"
        style="margin-left: 15px"
        @click="baocun"
      >保存
      </el-button>
      <el-button
        type="info" plain
        style="margin-left: 15px"
        @click="fanhui"
      >返回
      </el-button>
    </div>

  </div>
</template>


<script>
  import ScrollPane from "@/layout/components/TagsView/ScrollPane";
  import {addBasic,getBasic,updateBasic} from "@/api/module/shao/shijian/basic";

  export default {
    dicts: ['he_event_severity','he_patient_age_grades','he_use_of_medications','he_anamnesis'],
    components: {ScrollPane},
    data() {
      return {
        //用于手风琴效果实现
        activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
        shijian: [],
        formEvent: {
          heEventBasic: {},
          heEventReport: {},
          //代表事件流程表
          heEventFlow: {},
        },
        reportForm: {
          reportEventType: '23',
          reviewEventType: '01',
          resultsPossibilityDispute: '',
          resultsEventSeverity: '',
          resultsEventClassification: '',
          resultsSeverityInjury: '',
        },
        // 表单参数
        basicForm: {
          apparatusClassification: '',
          apparatusProductName: '',
          apparatusRegistrationNumber: '',
          apparatusModel: '',
          apparatusSpecifications: '',
          apparatusProductBatch: '',
          apparatusProductNumber: '',
          apparatusUdi: '',
          apparatusDateProduction: '',
          apparatusValidUntil: '',
          apparatusLicenseHolder: '',
          apparatusDateIncident: '',
          apparatusDiscoveryAcquisition: '',
          apparatusHurt: '',
          apparatusInjuryPerformance: '',
          apparatusInjuryPicture: '',
          apparatusEquipmentFailure: '',
          apparatusFailurePicture: '',
          apparatusInvolvePatients: '',
          apparatusDiagnoseType: '',
          apparatusPatientName: '',
          apparatusBirthDate: '',
          apparatusAge: '',
          apparatusGender: '',
          apparatusMedicalRecord: '',
          apparatusPastHistory: '',
          apparatusTreatmentEffect: '',
          apparatusDateUseEquipment: '',
          apparatusPlaceUse: '',
          apparatusNamePlace: '',
          apparatusUsageProcess: '',
          apparatusCombinedEquipment: '',
          apparatusAnalysisCause: '',
          apparatusAnalysisDescription: '',
          apparatusAnalysisPicture: '',
          apparatusDisposalSituation: '',
          apparatusDisposalPicture: '',
        },
        //代表事件流程表
        flowForm: {},
        //校验器械使用情况表单
        qingkuangrules: {
          apparatusClassification: [{
            required: true, message: "类别不能为空", trigger: "change"
          }],
          apparatusProductName: [{
            required: true, message: "产品名称不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusRegistrationNumber: [{
            required: true, message: "注册证编号不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusModel: [{
            required: true, message: "型号不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusSpecifications: [{
            required: true, message: "规格不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusProductBatch: [{
            required: true, message: "产品批号不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusProductNumber: [{
            required: true, message: "产品编号不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusUdi: [{
            required: true, message: "UDI不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
          apparatusDateProduction: [{
            required: true, message: "生产日期不能为空", trigger: "blur"
          }],
          apparatusValidUntil: [{
            required: true, message: "有效日期不能为空", trigger: "blur"
          }],
          apparatusLicenseHolder: [{
            required: true, message: "上市许可持有人名称不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}
          ],
        },
        //不良事件情况的表单校验
        buliangrules: {
          apparatusDateIncident: [{
            required: true, message: "事件发生日期不能为空", trigger: "blur"
          }],
          apparatusDiscoveryAcquisition: [{
            required: true, message: "发现或获知日期不能为空", trigger: "blur"
          }],
          apparatusInjuryPerformance: [{
            required: true, message: "伤害表现不能为空", trigger: "blur"
          }
          ],
          apparatusEquipmentFailure: [{
            required: true, message: "器械故障表现不能为空", trigger: "blur"
          }],
          apparatusInvolvePatients: [{
            required: true, message: "是否涉及患者不能为空", trigger: "change"
          }],
        },
        shiyongrules: {
          apparatusTreatmentEffect: [{
            required: true, message: "预期治疗疾病或作用不能为空", trigger: "blur"
          }],
          apparatusDateUseEquipment: [{
            required: true, message: "器械使用日期不能为空", trigger: "blur"
          }],
          apparatusPlaceUse: [{
            required: true, message: "使用场所不能为空", trigger: "change"
          }],
          apparatusNamePlace: [{
            required: true, message: "场所名称不能为空", trigger: "blur"
          },
            {min: 1, max: 50, message: '长度在 1-50 个字符', trigger: 'blur'}],
          apparatusUsageProcess: [{
            required: true, message: "使用过程不能为空", trigger: "blur"
          }],
          apparatusCombinedEquipment: [{
            required: true, message: "合并用药械情况说明不能为空", trigger: "blur"
          }],
        },
        fenxirules: {
          apparatusAnalysisDescription: [{
            required: true, message: "事件原因分析描述不能为空", trigger: "blur"
          }],
          apparatusDisposalSituation: [{
            required: true, message: "初步处置情况不能为空", trigger: "blur"
          }],
        },
        jieguorules: {
          resultsEventClassification: [{
            required: true, message: "事件分级不能为空", trigger: "change"
          }],
          resultsEventSeverity: [{
            required: true, message: "事件严重程度不能为空", trigger: "change"
          }],
          resultsSeverityInjury: [{
            required: true, message: "伤害严重度不能为空", trigger: "change"
          }],
        },
      }
    },
    // 禁止web端屏幕缩放
    created() {
      this.formEvent.heEventReport.id = this.$route.query.id;
      if(this.formEvent.heEventReport.id){
        getBasic(this.formEvent.heEventReport.id).then(response => {
          //获取后台传过来的表单
          this.formEvent = response.data;
          //将其对应赋值进行表单渲染
          this.basicForm=this.formEvent.heEventBasic
          this.reportForm=this.formEvent.heEventReport
          this.xian();
        });
      }
      // window.addEventListener("mousewheel", function (event) {
      //   if (event.ctrlKey === true || event.metaKey) {
      //     event.preventDefault();
      //   }
      // }, {passive: false})
    },
    methods: {
      xian(){
        //用于多选框反显
        this.shijian=this.pushCheckbox(this.basicForm.apparatusAnalysisCause)
      },
      //用于多选框反显,如果str不为空则执行通过','切割操作否则将其置为空初始化
      pushCheckbox(str){
        if(str!=null){
          const boxlist=str.split(',');
          return boxlist;
        }else {
          return [];
        }
      },
      //进行多个选项框的时候可以选择多个事件
      shijian1(boxlist) {
        this.basicForm.apparatusAnalysisCause = this.popCheckbox(boxlist);
      },
      //这个是由于有的是多选框有的是单选但是我们后台只能接字符串而不是数组所以需要分割下面会调用
      popCheckbox(boxlist) {
        let str = '';
        for (let i = 0; i < boxlist.length; i++) {
          if (i == 0) {
            str = boxlist[i];
          } else {
            str = str + ',' + boxlist[i];
          }
        }
        return str;
      },
      //返回按钮
      fanhui() {
        if (this.formEvent.heEventReport.id != null){
          this.$router.push({path: "/hosipitalevent/caogaoshijian"});
        }else{
          this.$router.push({path: "/hosipitalevent/report"});
        }
      },
      //保存按钮事件
      baocun() {
        // 医疗器械情况
        this.$refs["basicqingkuangform"].validate(valid => {
          if (valid) {
            // 不良事件情况
            this.$refs["basicbuliangform"].validate(valid => {
              if (valid) {
                // 使用情况表单
                this.$refs["basicshiyongform"].validate(valid => {
                  if (valid) {
                    // 事件初步原因分析与处置表单
                    this.$refs["basicfenxiform"].validate(valid => {
                      if (valid) {
                        // 事件结果表单
                        this.$refs["reportjieguoform"].validate(valid => {
                          if (valid) {
                            //发生时间
                            if (this.basicForm.apparatusDateIncident !== null) {
                              this.basicForm.apparatusDateIncident = this.basicForm.apparatusDateIncident.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai',hour12: false})
                              this.basicForm.apparatusDateIncident= this.basicForm.apparatusDateIncident.replace(/\//g, '-')
                            }
                            //发生日期
                            if (this.basicForm.apparatusDiscoveryAcquisition !== null) {
                              this.basicForm.apparatusDiscoveryAcquisition = this.basicForm.apparatusDiscoveryAcquisition.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai',hour12: false})
                              this.basicForm.apparatusDiscoveryAcquisition= this.basicForm.apparatusDiscoveryAcquisition.replace(/\//g, '-')
                            }
                            //生产日期
                            if (this.basicForm.apparatusDateProduction !== null) {
                              this.basicForm.apparatusDateProduction = this.basicForm.apparatusDateProduction.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai',hour12: false})
                              this.basicForm.apparatusDateProduction= this.basicForm.apparatusDateProduction.replace(/\//g, '-')
                            }
                            //有效日期
                            if (this.basicForm.apparatusValidUntil !== null) {
                              this.basicForm.apparatusValidUntil = this.basicForm.apparatusValidUntil.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai',hour12: false})
                              this.basicForm.apparatusValidUntil= this.basicForm.apparatusValidUntil.replace(/\//g, '-')
                            }
                            this.reportForm.note1 = "器械报告事件"
                            this.formEvent.heEventReport = this.reportForm
                            this.formEvent.heEventBasic = this.basicForm
                            this.formEvent.heEventFlow = this.flowForm
                            //如果能查到该条数据则执行修改
                            if (this.formEvent.heEventReport.id!= null) {
                              updateBasic(this.formEvent).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.$router.push({path: "/hosipitalevent/caogaoshijian"});
                              });
                            } else {
                              //否则执行新增
                              addBasic(this.formEvent).then(response => {
                                this.$modal.msgSuccess("事件创建成功，请进入并呈送事件！");
                                // this.$router.push({path: "/index"});
                                this.$router.push({path: "/hosipitalevent/caogaoshijian"});//跳转到呈送页面
                              });
                            }
                          }
                        })
                      }
                    })
                  }
                })
              }
            })
          }
        });
      },
      ding() {
        window.scrollTo(0, 0);
      },
      //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
      goAssignBlock(el, speed) {
        let t = this.$refs[el].offsetTop - 100

        function scrollToTop() {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

          if (scrollTop > t) {
            window.scrollTo(0, scrollTop - speed);

            // 使用 requestAnimationFrame 进行平滑滚动
            requestId = window.requestAnimationFrame(scrollToTop);
          } else {
            window.scrollTo(0, t);
            // 取消动画帧的请求
            window.cancelAnimationFrame(requestId);
          }
        }
        let requestId = window.requestAnimationFrame(scrollToTop);
      },
    },
  }

</script>

<style lang="scss" scoped>
  @import "src/views/module/shao/blackFont";

  .sidebar {
    margin-left: 3%;
    width: 10%;
    float: left;
    display: flex;
  }

  .content {
    margin-left: 3%;
    margin-right: 1.5%;
    width: 87%;
    float: right;
  }

  .btn-box {
    position: fixed;
    margin-top: 1%;

    ::v-deep .el-card__body {
      padding: 15px 15px 15px 5px;
    }
  }

  .btn-box button {
    text-align: left;
    padding: 0 0 0 10px;
    display: block;
    width: 180px;
    height: 40px;
    border: none;
    cursor: pointer;
  }

  .btn-box button:hover {
    background: hsl(221, 98%, 68%);
    color: white;
  }

  .block {
    border: 1px solid white;
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 5rem;
    box-sizing: border-box;

    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .shaoqicaibname {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: black;
  }

</style>
